﻿@model CartViewOutput

@using UsedBookTradeSystem.Models.Entity
@using UsedBookTradeSystem.Models.Dtos.OutputDtos
@using UsedBookTradeSystem.Models.Enum
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<section class="py-5 bg-light">
    <div class="container">
        <div class="row px-4 px-lg-5 py-lg-4 align-items-center">
            <div class="col-lg-6">
                <h1 class="h2 text-uppercase mb-0">购物车</h1>
            </div>
            <div class="col-lg-6 text-lg-end">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-lg-end mb-0 px-0 bg-light">
                        <li class="breadcrumb-item"><a class="text-dark" href="/Home/Shop">商城</a></li>
                        <li class="breadcrumb-item active" aria-current="page">购物车</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
<section class="py-5">
    <h2 class="h5 text-uppercase mb-4">购物车</h2>
    <div class="row">
        <div class="col-lg-12 mb-4 mb-lg-0">
            <form action="/Cart/UpdateCart" method="post" id="From">
                <input hidden id="GoWhere" asp-for="GoWhere" value="111" />
            <!-- CART TABLE-->
            <div class="table-responsive mb-4">
                    <table class="table text-nowrap">
                        <thead class="bg-light">
                            <tr>
                                <th class="border-0 p-3" scope="col"> <strong class="text-sm text-uppercase">书名</strong></th>
                                <th class="border-0 p-3" scope="col"> <strong class="text-sm text-uppercase">价格</strong></th>
                                <th class="border-0 p-3" scope="col"> <strong class="text-sm text-uppercase">数量</strong></th>
                                <th class="border-0 p-3" scope="col"> <strong class="text-sm text-uppercase">总价</strong></th>
                                <th class="border-0 p-3" scope="col"> <strong class="text-sm text-uppercase"></strong></th>
                            </tr>
                        </thead>
                        <tbody class="border-0">
                            @for (int i = 0; i < @Model.CartInfoOutput.Count; i++)
                            {
                                <tr id="tr@(i)">
                                    <input asp-for="@Model.CartInfoOutput[i].BookInfoId" hidden value="@Model.CartInfoOutput[i].BookInfoId" />
                                    <th class="ps-0 py-3 border-light" scope="row">
                                        <div class="d-flex align-items-center">
                                            <a class="reset-anchor d-block animsition-link" href="detail.html"><img src="@Model.CartInfoOutput[i].BookPicture" alt="..." width="70" /></a>
                                            <div class="ms-3"><strong class="h6"><a class="reset-anchor animsition-link" href="detail.html" name="BookName">@Model.CartInfoOutput[i].BookName</a></strong></div>
                                        </div>
                                    </th>
                                    <td class="p-3 align-middle border-light">
                                        <p class="mb-0 small" name="Price">￥@Model.CartInfoOutput[i].Price</p>
                                    </td>
                                    <td class="p-3 align-middle border-light">
                                        <div class="border d-flex align-items-center justify-content-between px-3">
                                            <span class="small text-uppercase text-gray headings-font-family">数量</span>
                                            <div class="quantity">
                                                <button type="button" class="p-0" onclick="downTimes('@i','@Model.CartInfoOutput[i].Price')"><i class="fas fa-caret-left"></i></button>
                                                <input id="@i" class="form-control form-control-sm border-0 shadow-0 p-0" type="text" asp-for="@Model.CartInfoOutput[i].BookCount" value="@Model.CartInfoOutput[i].BookCount" readonly />
                                                <button type="button" class="p-0" onclick="addTimes('@i','@Model.CartInfoOutput[i].BookInventory','@Model.CartInfoOutput[i].Price')"><i class="fas fa-caret-right"></i></button>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-3 align-middle border-light">
                                        <p class="mb-0 small" id="totol@(i)">￥@Model.CartInfoOutput[i].TotolPrice</p>
                                    </td>
                                    <td class="p-3 align-middle border-light"><a type="button" onclick="removeItem('@i')" class="reset-anchor"><i class="fas fa-trash-alt small text-muted"></i></a></td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            <!-- CART NAV-->
            <div class="bg-light px-4 py-3">
                <div class="row align-items-center text-center">
                        <div class="col-md-6 mb-3 mb-md-0 text-md-start"><button type="button" onclick="ChangeValue('Back')" class="btn btn-link p-0 text-dark btn-sm"><i class="fas fa-long-arrow-alt-left me-2"> </i>继续购物</button></div>
                        <div class="col-md-6 text-md-end"><button type="button" onclick="ChangeValue('CheckOut')" class="btn btn-outline-dark btn-sm">结算<i class="fas fa-long-arrow-alt-right ms-2"></i></button></div>
                </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script>
    function downTimes(ElementName,Price) {
        let currentValue = parseInt(document.getElementById(ElementName).value, 10); // 获取当前值并转换为整数
        let minValue = 1; // 设置最小值，可以根据需要调整
        let price = Number(Price);

        // 检查当前值是否有效且大于最小值
        if (!isNaN(currentValue) && currentValue > minValue) {
            // 减少当前值
            document.getElementById(ElementName).value = currentValue - 1;
        } else {
            // 如果当前值无效或已经达到最小值，则不做任何操作或显示错误消息
            document.getElementById(ElementName).value = 1;
            // 如果需要，可以在这里添加逻辑来显示一个提示或错误消息给用户
        }
        updateTotalPrice(ElementName, Price);
    }
    function addTimes(ElementName,BookInventory,Price) {
        let currentValue = parseInt(document.getElementById(ElementName).value, 10); // 确保转换为整数
        let maxValue = parseInt(BookInventory, 10); // 确保转换为整数
        let price = Number(Price);
        console.log('Current value:', currentValue);
        console.log('Max value:', maxValue);

        if (!isNaN(currentValue) && !isNaN(maxValue)) { // 检查值是否都是数字
            if (currentValue >= maxValue) { // 使用 >= 来确保当值等于最大值时不再增加
                document.getElementById(ElementName).value = maxValue;
            } else {
                document.getElementById(ElementName).value = currentValue + 1;
            }
        } else {
            console.error('Invalid values for current or max value');
        }
        updateTotalPrice(ElementName, Price);
    }
    function removeItem(id) 
    {
        if (confirm("确定要删除此物品吗？")) {
            document.getElementById(id).value = 0;
            var trElement = document.getElementById('tr' + id);
            trElement.style.display = 'none';
        } 
    }
    function ChangeValue(destination) {
        document.getElementById('GoWhere').value = destination;
        document.getElementById('From').submit();
    }
    function updateTotalPrice(ElementName, Price) {
        let currentValue = parseInt(document.getElementById(ElementName).value, 10);
        if (!isNaN(currentValue)) {
            document.getElementById('totol' + ElementName).textContent = '￥' + (currentValue * Price).toFixed(2); // 使用 toFixed 来格式化价格
        }
    }
</script>